<template>
  <div class="step-b">
    <div class="tip">
      <el-alert
        title="请确保信息准确无误，若有虚假则两年内不可办理网上选号业务"
        type="warning"
        show-icon
        center
        :closable="false"
      />
    </div>
    <el-form label-width="100px" :model="requestForm">
      <el-form-item label="品牌种类">
        <el-select
          v-model="requestForm.variety"
          placeholder="请选择品牌种类"
          @change="VouCherChange"
        >
          <el-option label="小型汽车" value="小型汽车" />
          <el-option label="小型新能源汽车" value="小型新能源汽车" />
          <el-option label="大型新能源汽车" value="大型新能源汽车" />
        </el-select>
      </el-form-item>
      <el-form-item label="机动车凭证">
        <el-select
          v-model="requestForm.voucher"
          placeholder="请选择机动车凭证"
          @change="varietyChange"
        >
          <el-option label="机动车合格证" value="机动车合格证" />
          <el-option label="货物进口证明" value="货物进口证明" />
        </el-select>
      </el-form-item>
      <el-form-item label="合格证号">
        <el-input
          v-model="requestForm.certificate"
          placeholder="请输入"
          @change="certificateChange"
        />
      </el-form-item>
      <el-form-item label="车辆识别代号">
        <el-input
          v-model="requestForm.identify"
          placeholder="请输入"
          @change="IdentifyChange"
        />
      </el-form-item>
      <el-form-item label="所有人">
        <el-input v-model="username" readonly />
      </el-form-item>
      <el-form-item label="车牌前缀">
        <el-input
          v-model="requestForm.carplatefront"
          type="text"
          placeholder="请输入车牌前缀"
          maxlength="8"
          show-word-limit
        />
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
export default {
  name: 'StepB',
  model: {
    prop: 'requestForm',
    event: 'valueChange'
  },
  props: {
    // eslint-disable-next-line vue/require-default-prop
    requestForm: {
      type: Object
    }
  },
  data() {
    return {
      formTemp: this.requestForm
    }
  },
  computed: {
    ...mapGetters([
      'username',
      'avatar',
      'roles'
    ])
  },
  methods: {
    VouCherChange(value) {
      this.formTemp.VouCherChange = value
      this.$emit('valueChange', this.formTemp)
    },
    varietyChange(value) {
      this.formTemp.varietyChange = value
      this.$emit('valueChange', this.formTemp)
    },
    certificateChange(value) {
      this.formTemp.certificateChange = value
      this.$emit('valueChange', this.formTemp)
    },
    IdentifyChange(value) {
      this.formTemp.IdentifyChange = value
      this.$emit('valueChange', this.formTemp)
    },
    CarPlateFrontChange(value) {
      this.formTemp.CarPlateFrontChange = value
      this.$emit('valueChange', this.formTemp)
    }
  }
}
</script>

<style scoped>
.step-b {
  width: 100%;
  display: flex;
  align-items: center;
  flex-direction: column;
}
.step-b .tip {
  width: 500px;
  margin: 10px 0 20px;
}
</style>
